<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>员工信息列表</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" style="text-align: center;" id="dataTable">
    <tr>
        <th colspan="5">员工信息</th>
    </tr>
    <tr>
        <th>员工编号</th>
        <th>员工姓名</th>
        <th>员工性别</th>
        <th>公司邮箱</th>
        <th>操作(<a href="/employee/toAdd">add</a>)</th>
    </tr>
</table>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
    //页面加载完成后，执行此函数
    $(function () {
        doGetAllEmp();
    });

    function doGetAllEmp() {
        //获取controller种绑定在model中的参数
        var items = '${employeeList}';
        //console.log(items);
        //将json格式字符串转换为js对象
        var jsObj = JSON.parse(items);
        console.log(jsObj);
        //迭代记录，并将内容追加到tbody
        if (jsObj.length >= 0) {
            $.each(jsObj, function (index, value) {
                //alert(index+";"+value);
                //1.获取tbody对象
                var tBody = $("#dataTable");
                //2.构建tr对象
                var tr = $("<tr></tr>");
                //3.构建td对象
                var tds = doCreateTds(value);
                //4.将tbs追加到tr上
                tr.append(tds);
                //5.将tr追加到tBody上
                tBody.append(tr);
            })
        } else {//根据指定条件查询记录
            //1.获取tbody对象
            var tBody = $("#dataTable");
            //2.构建tr对象
            var tr = $("<tr></tr>");
            //entries()返回一个数组，其预算是与直接在object上找到的可枚举属性键值对相对应数组，
            //属性的顺序与通过手动循环对象的属性值所给出的顺序相同
            var objMap = new Map(Object.entries(jsObj));
            console.log(objMap)
            //3.构建td对象
            var tds =
                "<td>" + objMap.get('id') + "</td>" +
                "<td>" + objMap.get('name') + "</td>" +
                "<td>" + objMap.get('email') + "</td>" +
                "<td>" + objMap.get('gender') + "</td>" +
                "<td><a onclick='deleteEmployee(this)'href='javascript:void(0);" + objMap.get('id') + "'>删除</a>" +
                "|&nbsp;<a href='updateEmployee?id=" + objMap.get('id') + "'>修改</a></td>";
            //4.将tbs追加到tr上
            tr.append(tds);
            //5.将tr追加到tBody上
            tBody.append(tr);
        }
    }

    function doCreateTds(value) {
        var tds =
            "<td>" + value.id + "</td>" +
            "<td>" + value.name + "</td>" +
            "<td>" + value.email + "</td>" +
            "<td>" + value.gender + "</td>" +
            "<td><a onclick='deleteEmployee(this)'href='javascript:void(0);" + value.id + "'>删除</a>" +
            "|&nbsp;<a href='updateEmployee?id=" + value.id + "'>修改</a></td>";
        return tds;
    }
</script>
</body>
</html>